<template>
	<!-- <view>
		<u-cell isLink @click="post">
			<text slot="title" class="card">帖子页面</text>
		</u-cell>
	</view> -->
	<view>
		<u-sticky bgColor="#fff">
			<u-tabs :list="postTypes" :current="current" @click="onClickItem" lineColor="#FFFFFF" :activeStyle="{
				color: '#303133',
				fontWeight: 'bold',
				transform: 'scale(1.05)'
			}" :inactiveStyle="{
				color: '#606266',
				transform: 'scale(1)'
			}" itemStyle="padding:0 15rpx" class="topnav">
				<view slot="left" style="padding-left: 30rpx;" @tap="ToSearch">
					<u-icon name="search" size="60" bold></u-icon>
				</view>
				<view slot="right" style="padding-right: 30rpx;">
					<u-icon name="list" size="50" bold></u-icon>
				</view>
			</u-tabs>
			<u-divider></u-divider>
		</u-sticky>
		<!-- 		<view v-if="current=== 0 "> -->
		<view class="card" v-for="(post,index) in postList" :key="index">
			<singlePost :key="post.pid" :index=index :showUser="true" :isLiked="likes[index]" :showSetting="false"
				:user="post.user" :post="post" @onClick="onClick($event,post,index)" @clickSetting="setting($event)"
				@updateLikes="updateIsliked" />
		</view>
		<view class="more" v-if="!more">
			到底了~~~
		</view>
		<!-- 		</view>
		<view v-if="current=== 1">1231231</view> -->
	</view>
</template>

<script>
	import config from "@/config/config.js"
	import singlePost from "@/components/single-post.vue"
	export default {
		components: {
			singlePost
		},
		data() {
			return {
				current: 0,
				postTypes: [{
					name: '推荐'
				}].concat(config.postTypes),
				postList: [],
				more: true,
				likes: [],
			}
		},
		onShow() {
			uni.$on('likeEvent', (res) => {
				console.log(res)
				res.index = parseInt(res.index)
				this.$set(this.likes, res.index, res.like)
				this.$set(this.postList[res.index], "likes", parseInt(res.num))
			})
		},
		methods: {
			updateIsliked(params) {
				this.$set(this.likes, params.index, params.isLiked)
			},
			ToSearch() {
				uni.navigateTo({
					url: "../search/search"
				})
			},
			onClickItem(e) {
				if (this.current != e.index) {
					this.current = e.index;
				}
				console.log(this.current);
				this.postList = [];
				if (this.current === 0) {
					this.getReCommendationList(new Date().getTime());
				} else {
					this.getPostList(new Date().getTime(), this.current - 1);
				}

			},
			watchPost(pid, index) {
				uni.navigateTo({
					url: "../post/post?pid=" + pid + "&index=" + index
				})
			},
			onClick(type, post, index) {
				console.log(type)
				if (["content", 'view', 'comment'].indexOf(type) > -1) this.watchPost(post.pid, index)
				if (type === "like") this.like(post.pid, index)
				if (type === "unlike") this.unLike(post.pid, index)
				if (type === "user") this.watchUser(post.uid)
			},
			unLike(pid, index) {
				console.log("取消点赞" + pid);
				this.$request.TokenRequest({
					url: "/post/UnLikePost"
				}, {
					pid: pid,
					uid: this.$store.state.user.uid,
				}).then(res => {
					if (res.state === 200) {
						this.$set(this.likes, index, false)
						this.$set(this.postList[index], "likes", this.postList[index].likes - 1)
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			like(pid, index) {
				console.log("like" + pid)
				this.$request.TokenRequest({
					url: "/post/likePost"
				}, {
					pid: pid,
					uid: this.$store.state.user.uid,
				}).then(res => {
					if (res.state === 200) {
						console.log("点赞成功")
						this.$set(this.likes, index, true)
						this.$set(this.postList[index], "likes", this.postList[index].likes + 1)
						// this.likes[index] = true;
						// this.postList[index].likes += 1;
					} else {
						uni.showToast({
							icon: "none",
							title: res.message
						})
					}
				})
			},
			watchUser(uid) {
				uni.navigateTo({
					url: "../pserson_info/pserson_info?uid=" + uid
				})
			},
			getReCommendationList(date) {
				this.$request.TokenRequest({
					url: "/post/recommendation"
				}, {
					date: date,
				}).then(res => {
					if (res.state === 200) {
						this.postList = this.postList.concat(res.data)
						if (res.message === "false") {
							this.more = false
						}
					} else {
						uni.showToast({
							icon: "none",
							title: res.message,
						})
					}
				})
			},
			getPostList(date, type) {
				this.$request.TokenRequest({
					url: "/post/getPostListByType"
				}, {
					date: date,
					type: type,
				}).then(res => {
					if (res.state === 200) {
						this.postList = this.postList.concat(res.data)
						if (res.message === "false") {
							this.more = false
						}
					} else {
						uni.showToast({
							icon: "none",
							title: res.message,
						})
					}
				})
			},
			getLatest() {
				let len = this.postList.length;
				if (len == 0) return new Date().getTime()
				else return new Date(this.postList[len - 1].date).getTime()
			}
		},
		mounted() {
			//TODO:初始化一下likes数组
			for (let i = 0; i < 100; i++) {
				this.likes.push(false)
			}
			// this.likes.push(false)
			// this.likes.push(true)
			//TODO:获取一部分关注用户
			this.getReCommendationList(new Date().getTime());
		},
		onReachBottom() {
			//TODO:获取下面的
			if (this.more) {
				if (this.current !== 0) {
					this.getPostList(this.getLatest(), this.current - 1)
				} else {
					this.getReCommendationList(new Date().getTime());
				}
			}
		},
		onPullDownRefresh() {
			this.postList = []
			if (this.current !== 0) {
				this.getPostList(this.getLatest(), this.current - 1)
			} else {
				this.getReCommendationList(this.getLatest());
			}
			uni.stopPullDownRefresh()
		}
	}
</script>

<style lang="scss" scoped>
	.topnav {
		padding-top: 50rpx;
		height: 50rpx;
	}

	/deep/ .u-tabs__wrapper__nav__item__text {
		font-size: 40rpx;
	}

	.more {
		text-align: center;
		padding: 20rpx;
		font-size: 30rpx;
		color: #9a9a9a;
	}

	.card {
		border-bottom: 15rpx solid #F6F6F6;
	}
</style>
